<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03盒模型_边框</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;

            border-width: 10px;
            border-color: orange;
            border-style: solid;
            /* border-width 可以不写，一般默认3px（不建议不写）
                            填写一个值，设置四边的方向
                            填写四个值，从上边框顺时针依次设置
                            填写三个或两个，缺少的边框设置对边属性值

                同理border-color也可以不写，默认使用color值，也可以填四个值

                border-style：
                            solid 实线
                            dotted 点状虚线
                            dashed 虚线
                            double 双线
                            也可以填四个，也可以不写，默认值是none

                border-xxx-width : 也是用来设置一条边的宽度（不常用） 
                同样还有border-xxx-color和border-xxx-style
                xxx -> top right bottom left
            */
            /* border 简写属性：用border同时设置三个属性，用空格隔开且没有顺序要求 */
            /* border-xxx与上面用法一样 */
            border: 10px orange solid;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>